<template>
  <div>

    <div style="margin-top: 20px; display: flex; justify-content: center;" v-if="$route.path.includes('/boss/')">
      <el-row type="flex" style="width: 60%;">
        <el-button type="info"
                   plain
                   @click="returnReportRelation">
          <i class="el-icon-back" />&nbsp;返回报告关联
        </el-button>
      </el-row>
    </div>
    <el-dropdown class="version" @command="handleCommand">
      <el-button type="primary" class="history">
        版本历史<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu class="project-dropdown" slot="dropdown">
        <el-dropdown-item v-for="version in versionList" :command="version.versionId" :disabled="version.versionId===showVersion">{{ version.versionName }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-main
        class="report-detail-box"
        v-loading="loading"
        element-loading-text="正在加载"
        element-loading-spinner="el-icon-loading">
      <div class="container-title">
        <img src="../../../../assets/image/report-details.png" alt="" style="width: 150px">
      </div>


      <report-detail-table
          :report="form"
          class="margin-top"
      >
      </report-detail-table>

    </el-main>


  </div>
</template>

<script>

import {getReportByReportID, getScreenshot} from "@/api/report";
import {getHistoryVersionsOfReport} from "@/api/report";
import ReportDetailTable from "@/components/new/report-detail-table/ReportDetailTable";

export default {
  name: 'ReportDetail',
  components: {ReportDetailTable},
  data() {

    return {
      versionList:[
        {
          versionId:1,
          versionName:'2001-20-23 18:00:00 提交版本',
        },
        {
          versionId:2,
          versionName:'2001-20-23 18:00:00 提交版本',
        },
        {
          versionId:3,
          versionName:'boss report detail',
        },
      ],
      showVersion:2,

      form: {
        taskname: '',
        type: '',
        environment: '',
        submittime: '',
        description: '',
        steps: '',
        screenshot: 'https://lluviasnowb01.oss-cn-hangzhou.aliyuncs.com/collect/8d6b0977-83d7-456c-9de7-24260ef6b202.jpg',
        workername: ''
      },
      baseUrl: 'https://lluviasnowb01.oss-cn-hangzhou.aliyuncs.com/collect/',

      reportId: -1
    };

  },

  computed: {

    loading() {
      return this.form['steps'] === '';
    }

  },

  created() {
    this.getReport();
    this.reportId = this.$route.params.reportid;
    this.loadHistoryVersion();
  },

  activated() {
    // 触发加载
    const tmp = this.form['steps'];
    this.form['steps'] = '';

    if (this.reportId !== this.$route.params.reportid) {
      this.getReport();
      this.reportId = this.$route.params.reportid;
    } else {
      this.form['steps'] = tmp;
    }
  },

  methods: {
    handleCommand(versionId){
      //todo 修改this.form,this.showVersion
      //下行$message代码可删除
      this.$message('click on '+versionId);
    },

    async getReport() {

      const res = await getReportByReportID(this.$route.params.reportid);
      if (res.code !== 200) {
        return this.$message.error('报告不存在！');
      }

      const obj = res.data;
      for (let key of Object.keys(obj)) {
        if (key === 'type') {
          if (obj['type'] === 'function_test') this.form['type'] = '功能测试';
          else if (obj['type'] === 'performance_test') this.form['type'] = '性能测试';
          else if (obj['type'] === 'bug_explore') this.form['type'] = 'Bug探索';
        } else {
          this.form[key] = obj[key];
        }
      }

      getScreenshot(this.$route.params.reportid).then(res2 => {
        this.form["screenshot"] = this.baseUrl + res2[0].url;
      });

    },

    returnReportRelation() {
      if (this.$route.params.reportid !== -1) {
        this.$router.push('/boss/mytasks/relation/' + this.$store.state.reportIdOfSubReport);
      } else {
        this.$router.push('/boss/mytasks/relation/executing');
      }
    },

    // lyl
    // todo lyl param name of the List
    loadHistoryVersion(){
      const latestReportId = this.$route.params.reportid;
      getHistoryVersionsOfReport(latestReportId).then(res=>{
        console.log(res.data);
        this.versionList = res.data.versionList;
      })
    }
  }
}
</script>

<style>

.el-descriptions-item__label.is-bordered-label {
  width: 120px !important;
}

</style>

<style scoped>
.version{
  position: fixed;
  right:30px;
  margin-top:30px;
}
.project-dropdown{
  height:400px;
  overflow: auto;
}
.history{
  color: #fff;
  background-color: #AB0427;
  border-color: #AB0427;
}
.history:hover{
  color: #AB0427;
  background-color: #F1F1F1;
  border-color: #AB0427;
}

.report-detail-box {
  position: relative;

  border: 1px solid #DCDFE6;
  width: 60%;
  margin: 20px auto 20px;
  padding: 3% 3%;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 8px #909399;

  background-color: #f8f8f8;
}


</style>
